<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园活动报名系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        h2 {
            color: #2980b9;
            margin-top: 30px;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
            text-decoration: none;
        }
        .btn:hover {
            background-color: #2980b9;
        }
        .btn-danger {
            background-color: #e74c3c;
        }
        .btn-danger:hover {
            background-color: #c0392b;
        }
        .btn-success {
            background-color: #2ecc71;
        }
        .btn-success:hover {
            background-color: #27ae60;
        }
        pre {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            overflow: auto;
            font-family: Consolas, monospace;
            font-size: 14px;
            line-height: 1.4;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
            min-height: 100px;
        }
        .footer {
            margin-top: 50px;
            text-align: center;
            color: #7f8c8d;
            font-size: 14px;
        }
        .status {
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
            display: inline-block;
        }
        .status-success {
            background-color: #2ecc71;
            color: white;
        }
        .status-error {
            background-color: #e74c3c;
            color: white;
        }
        .status-warning {
            background-color: #f39c12;
            color: white;
        }
        .status-fallback {
            background-color: #9b59b6;
            color: white;
        }
        .panel {
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .panel-header {
            background-color: #f5f5f5;
            padding: 10px 15px;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }
        .panel-body {
            padding: 15px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        .activity-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .activity-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .activity-card h3 {
            margin-top: 0;
            color: #3498db;
        }
        .activity-card p {
            margin-bottom: 10px;
        }
        .activity-card .actions {
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>校园活动报名系统</h1>
        <p>本系统演示了使用OpenFeign进行微服务接口调用，包括负载均衡、熔断降级等功能。</p>
        
        <div class="panel">
            <div class="panel-header">服务状态</div>
            <div class="panel-body">
                <button class="btn" onclick="checkHealthStatus()">检查服务健康状态</button>
                <div id="health-result" class="result">
                    <p>点击按钮检查服务健康状态...</p>
                </div>
            </div>
        </div>

        <h2>活动列表</h2>
        <button class="btn" onclick="getAllActivities()">获取所有活动</button>
        <div id="activities-container" class="activity-list">
            <!-- 活动列表将通过JavaScript动态加载 -->
        </div>
        
        <h2>按类别查看活动</h2>
        <div class="form-group">
            <label for="category-id">选择类别:</label>
            <select id="category-id" class="form-control">
                <option value="1">学术讲座</option>
                <option value="2">文体活动</option>
                <option value="3">志愿服务</option>
                <option value="4">社团活动</option>
                <option value="5">竞赛活动</option>
            </select>
        </div>
        <button class="btn" onclick="getActivitiesByCategory()">按类别查询</button>
        
        <h2>活动报名</h2>
        <div class="form-group">
            <label for="activity-id">活动ID:</label>
            <input type="number" id="activity-id" class="form-control" value="1">
        </div>
        <div class="form-group">
            <label for="user-id">用户ID:</label>
            <input type="number" id="user-id" class="form-control" value="1">
        </div>
        <button class="btn btn-success" onclick="registerForActivity()">报名活动</button>
        <button class="btn btn-danger" onclick="cancelRegistration()">取消报名</button>
        <pre id="registration-result">操作结果将显示在这里...</pre>
        
        <h2>创建新活动</h2>
        <div class="form-group">
            <label for="new-activity-title">活动标题:</label>
            <input type="text" id="new-activity-title" class="form-control" placeholder="输入活动标题">
        </div>
        <div class="form-group">
            <label for="new-activity-description">活动描述:</label>
            <textarea id="new-activity-description" class="form-control" rows="4" placeholder="输入活动描述"></textarea>
        </div>
        <div class="form-group">
            <label for="new-activity-location">活动地点:</label>
            <input type="text" id="new-activity-location" class="form-control" placeholder="输入活动地点">
        </div>
        <div class="form-group">
            <label for="new-activity-category">活动类别:</label>
            <select id="new-activity-category" class="form-control">
                <option value="1">学术讲座</option>
                <option value="2">文体活动</option>
                <option value="3">志愿服务</option>
                <option value="4">社团活动</option>
                <option value="5">竞赛活动</option>
            </select>
        </div>
        <button class="btn btn-success" onclick="createActivity()">创建活动</button>
        <pre id="create-result">创建结果将显示在这里...</pre>
        
        <div class="footer">
            <p>校园活动报名系统 | OpenFeign微服务调用演示</p>
        </div>
    </div>

    <script>
        // 检查服务健康状态
        function checkHealthStatus() {
            const resultDiv = document.getElementById('health-result');
            resultDiv.innerHTML = '<p>正在检查服务健康状态...</p>';
            
            fetch('/api/campus/health')
                .then(response => response.json())
                .then(data => {
                    if (!data.data) {
                        throw new Error('服务响应异常');
                    }
                    
                    const healthData = data.data;
                    let statusClass = healthData.status === 'UP' ? 'status-success' : 'status-error';
                    if (healthData.isFallback) {
                        statusClass = 'status-fallback';
                    }
                    
                    let html = `<div>
                        <p>服务状态: <span class="${statusClass}">${healthData.status}</span></p>
                        <p>检查时间: ${new Date(healthData.checkTime).toLocaleString()}</p>
                    `;
                    
                    if (healthData.isFallback) {
                        html += `<p><strong>注意:</strong> 返回了降级响应，服务可能不可用</p>`;
                    }
                    
                    html += `</div>`;
                    resultDiv.innerHTML = html;
                })
                .catch(error => {
                    resultDiv.innerHTML = `<p class="status-error">错误: ${error.message}</p>`;
                });
        }
        
        // 获取所有活动
        function getAllActivities() {
            const activitiesContainer = document.getElementById('activities-container');
            activitiesContainer.innerHTML = '<p>正在加载活动列表...</p>';
            
            fetch('/api/campus/activities')
                .then(response => response.json())
                .then(data => {
                    if (!data.data || !Array.isArray(data.data)) {
                        throw new Error('服务响应异常');
                    }
                    
                    const activities = data.data;
                    if (activities.length === 0) {
                        activitiesContainer.innerHTML = '<p>没有找到活动</p>';
                        return;
                    }
                    
                    let html = '';
                    activities.forEach(activity => {
                        html += `
                            <div class="activity-card">
                                <h3>${activity.title || '未知活动'}</h3>
                                <p>${activity.description || '无描述'}</p>
                                <p><strong>开始时间:</strong> ${activity.startTime || '未知'}</p>
                                <p><strong>地点:</strong> ${activity.location || '未知'}</p>
                                <div class="actions">
                                    <button class="btn" onclick="getActivityById(${activity.id})">查看详情</button>
                                </div>
                            </div>
                        `;
                    });
                    
                    activitiesContainer.innerHTML = html;
                })
                .catch(error => {
                    activitiesContainer.innerHTML = `<p class="status-error">错误: ${error.message}</p>`;
                });
        }
        
        // 获取活动详情
        function getActivityById(id) {
            fetch(`/api/campus/activities/${id}`)
                .then(response => response.json())
                .then(data => {
                    if (!data.data) {
                        throw new Error('服务响应异常');
                    }
                    
                    const activity = data.data;
                    alert(`活动详情:\n标题: ${activity.title}\n描述: ${activity.description}\n开始时间: ${activity.startTime}\n地点: ${activity.location}`);
                })
                .catch(error => {
                    alert(`获取活动详情失败: ${error.message}`);
                });
        }
        
        // 按类别获取活动
        function getActivitiesByCategory() {
            const categoryId = document.getElementById('category-id').value;
            const activitiesContainer = document.getElementById('activities-container');
            activitiesContainer.innerHTML = '<p>正在加载活动列表...</p>';
            
            fetch(`/api/campus/activities/category/${categoryId}`)
                .then(response => response.json())
                .then(data => {
                    if (!data.data || !Array.isArray(data.data)) {
                        throw new Error('服务响应异常');
                    }
                    
                    const activities = data.data;
                    if (activities.length === 0) {
                        activitiesContainer.innerHTML = '<p>该类别下没有找到活动</p>';
                        return;
                    }
                    
                    let html = '';
                    activities.forEach(activity => {
                        html += `
                            <div class="activity-card">
                                <h3>${activity.title || '未知活动'}</h3>
                                <p>${activity.description || '无描述'}</p>
                                <p><strong>开始时间:</strong> ${activity.startTime || '未知'}</p>
                                <p><strong>地点:</strong> ${activity.location || '未知'}</p>
                                <div class="actions">
                                    <button class="btn" onclick="getActivityById(${activity.id})">查看详情</button>
                                </div>
                            </div>
                        `;
                    });
                    
                    activitiesContainer.innerHTML = html;
                })
                .catch(error => {
                    activitiesContainer.innerHTML = `<p class="status-error">错误: ${error.message}</p>`;
                });
        }
        
        // 报名活动
        function registerForActivity() {
            const activityId = document.getElementById('activity-id').value;
            const userId = document.getElementById('user-id').value;
            const resultPre = document.getElementById('registration-result');
            resultPre.textContent = '正在报名...';
            
            fetch(`/api/campus/activities/${activityId}/register?userId=${userId}`, {
                method: 'POST'
            })
                .then(response => response.json())
                .then(data => {
                    resultPre.textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    resultPre.textContent = `错误: ${error.message}`;
                });
        }
        
        // 取消报名
        function cancelRegistration() {
            const activityId = document.getElementById('activity-id').value;
            const userId = document.getElementById('user-id').value;
            const resultPre = document.getElementById('registration-result');
            resultPre.textContent = '正在取消报名...';
            
            fetch(`/api/campus/activities/${activityId}/register?userId=${userId}`, {
                method: 'DELETE'
            })
                .then(response => response.json())
                .then(data => {
                    resultPre.textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    resultPre.textContent = `错误: ${error.message}`;
                });
        }
        
        // 创建活动
        function createActivity() {
            const title = document.getElementById('new-activity-title').value;
            const description = document.getElementById('new-activity-description').value;
            const location = document.getElementById('new-activity-location').value;
            const categoryId = document.getElementById('new-activity-category').value;
            const resultPre = document.getElementById('create-result');
            
            if (!title || !description || !location) {
                resultPre.textContent = '请填写完整的活动信息';
                return;
            }
            
            resultPre.textContent = '正在创建活动...';
            
            const activity = {
                title: title,
                description: description,
                location: location,
                categoryId: parseInt(categoryId),
                startTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(), // 一周后
                endTime: new Date(Date.now() + 8 * 24 * 60 * 60 * 1000).toISOString(), // 八天后
                maxParticipants: 50,
                creatorId: 1
            };
            
            fetch('/api/campus/activities', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(activity)
            })
                .then(response => response.json())
                .then(data => {
                    resultPre.textContent = JSON.stringify(data, null, 2);
                    if (data.code === 200) {
                        // 创建成功后刷新活动列表
                        getAllActivities();
                    }
                })
                .catch(error => {
                    resultPre.textContent = `错误: ${error.message}`;
                });
        }
        
        // 页面加载完成后自动检查服务健康状态并加载活动列表
        window.onload = function() {
            checkHealthStatus();
            getAllActivities();
        };
    </script>
</body>
</html> 